import {h, provide, inject} from "../../lib/guide-mini-vue.esm.js";

/**
 *
 * 如果说Vue是一个类似MVVM的框架,那么是否可以说setup 函数一侧连着model(数据),render函数一侧连着View(视图)?
 */


const Provider = {
    name: "Provider",
    setup() {
        provide("bar", "barVal");
        provide("foo", "fooVal");
    }, render() {
        return h("div", {}, [h("p", {}, "Provider"), h(ProviderTwo)])
    }
}

const ProviderTwo = {
    name: "ProviderTwo",
    setup() {
        provide("foo", "fooTwoVal");
        const foo = inject("foo");
        return {
            foo
        }
    }, render() {
        return h("div", {}, [h("p", {}, "ProviderTwo" + this.foo), h(Consumer)])
    }
}

const Consumer = {
    name: "Consumer",
    setup() {
        const bar = inject("bar")
        const foo = inject("foo")
        return {
            foo, bar
        }
    }, render() {
        return h("div", {}, `Comsumer : ${this.foo} - ${this.bar}`)
    }
}

export const App = {
    name: "App",
    setup() {
        return {}
    },
    render() {
        return h("div", {}, [h("p", {}, "apiInject"), h(Provider)])
    }
}